<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/element.css">
</head>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script src="/js/formDataUtils.js"></script>
<style>
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height: 100%;
    }

    #container {
        height: calc(100% - 12px);
        padding:5px;
    }

    .el-card {
        height: 100%;
    }
    .el-card__body {
        height:calc(100% - 30px);
    }
</style>
<body>
<div id="container">
    <el-card>
        <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
          <#list properties as p>
          <el-form-item label="${p.descript}" prop="${p.name}">
            <el-input v-model<#if p.type =="Integer">.number</#if>="form.${p.name}" autocomplete="off"></el-input>
          </el-form-item>
          </#list>
          <el-row style="text-align: center;">
                <el-col>
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="addFormSubmit('form')">确认</el-button>
                </el-col>
          </el-row>
        </el-form>
    </el-card>
</div>
<script>
    var index = parent.layer.getFrameIndex(window.name);
    var con = new Vue({
        el: "#container",
        data() {
            return {
                title: "这里是通过模板添加的弹窗！",
                formLabelWidth: "100px",
                form: {
                   <#list properties as p>
                   ${p.name}:'',
                   </#list>
                },
                //表单校验规则
                rules: {
                  <#list properties as p>

                    ${p.name}: [
                      <#if p.notnull>
                        { required: true, message: '请输入${p.descript}', trigger: 'blur' },
                      </#if>
                      <#if p.type == "Integer">
                        { type: 'number', message: '${p.descript}必须为数字值'}
                      </#if>
                    ],
                  </#list>
                },
            }
        },
        mounted() {
            let data = parent.tem.getUpdateData();

            if(data.id){
                for ( key in data){
                    this.form[key] = data[key];
                }                
            }
        },
        methods: {
            close() {
                parent.layer.close(index);
            },
            addFormSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = new FormData();
                        Object.keys(this.form).forEach((key) => {
                            param.append(key, this.form[key]);
                        });
                        let url = '${parentURL}/add';
                        if( this.form.id){
                            url = '${parentURL}/update';
                        }
                        axios.post(url, param).then(res => {
                            if (res.data.success) {
                                parent.tem.$message.success("添加成功！");
                            } else {
                                parent.tem.$message.error(res.data.message);
                            }
                            //父页面刷新表格数据
                            parent.tem.search();
                            //关闭弹窗
                            this.close();

                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>